Create a Toolbar
Introduction This tutorial is a continuation to the tutorial Create an Activity with Layout. To start this tutorial, you must already have an compilable activity with layout. You will learn how to create a content layout and a CoordinatorLayout. You will learn how to create a Toolbar and how to change the text it displays. Create a Content layout To have a working toobar, you must create another layout file. This file will contain the all the main content of your activity. The name format should be content_"ClassName".xml. For this tutorial, it will be called content_main.xml. If you followed the Create an Activity with Layout tutorial, you can just copy the activity_main.xml code to this file. Otherwise, follow the instructions below. Right click your layout package, and add a new Layout Resource File. You can choose any Root element, but for this tutorial, we will use the LinearLayout, as it's simpler to use. The directory name should be "layout". Your content_main.xml should look like this: We will add a TextView, so our layout won't be blank when we run our application. Create a new TextView inside the LinearLayout, set its layout_width and layout_height to "wrap_content" and set it's text to "Hello World!", or anything you'd like. When you are finished, your layout file should look like this: Create a Coordinator layout If you already have an activty_"ClassName".xml fle, its contents should be moved to the content_"ClassName".xml file. After that, you can erase the layout file and follow the steps below. Differently from the previous tutorial, here we will use the CoordinatorLayout. CoordinatorLayout is a super-powered FrameLayout. The CoordinatorLayout is intended for two primary use cases: As a top-level application decor or chrome layout; and as a container for a specific interaction with one or more child views. Create a new CoordinatorLayout. Inside the CoordinatorLayout, we will include two things. First, an AppBarLayout, to contain the Toolbar, and last, our content_main.xml. Create an AppBarLayout inside the CoordinatorLayout. Below the AppBarLayout, include a reference to our content_main.xml layout. By now, our activity_main.xml file should look like this: Create the Toolbar widget Inside the AppBarLayout, create a Toolbar After you are finished, your xml file should look like this: Importing Import the following class: import android.support.v7.widget.Toolbar; Complement the onCreate() method Inside the onCreate() method, use findViewById to find our Toolbar. Then, use the method setSupportActionBar() to tell the application which view is our Toolbar. When you are finished, your java class file should look like this: package br.com.jeanknapp.helloworld; import android.os.Bundle; import android.support.v7.app.AppCompatActivity; import android.support.v7.widget.Toolbar; /** * Created by Jean on 08/10/2016. */ public class Mainctivity extends AppCompatActivity { @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main); Toolbar toolbar = (Toolbar) findViewById(R.id.toolbar); setSupportActionBar(toolbar); } } Setting the Toolbar title By default, your toolbar will display your activity label. It is set in your AndroidManifest.xml file. To change the text displayed in the Toolbar, other than programmatically options, there are two ways. You can change the app_name string, or you can change the the label of your activity. Changing the app name Inside the values package, open the strings.xml file. There you should have a string called app_name. The text you insert here will replace the text displayed by the Toolbar. Hello World It will also change the name of your application, so, if you want your activity to display a text and keep the application name, you should follow the next step. Changing the activity label Inside the strings.xml file, create a new string. By naming conventions, you should call it activity_"ClassName"_title. In this tutorial, we will call it activity_main_title. My New Activity Now, open your AndroidManifest.xml file, and change your Activity label to the new string you created. android:label="@string/activity_main_title" Your AndroidManifest.xml file should look like this: Conclusion Your activity now has a basic toolbar displaying the name of your activity. For the next steps, you should learn how to add working action buttons to your Toolbar to give functions to your application. You now know how to create a content layout, a CoordinatorLayout and a Toolbar. Next Steps * Create a Scrolling Activity with a Collapsing Toolbar Category:Beginner Tutorials Category:Toolbar